//用于存储JS的工具函数
//函数封装:遵循小而美的原则
// 1.使用方便,灵活复用 2.实现功能的函数代码简介 3.函数的性能
//心法:复用封函数,变化改参数

/* description  对参数的注释
returns 对返回值的注释 */
/**
 * 
 * @description 通过指定选择器获取对应的函数节点
 * @param { string } selector 
 * @returns 
 */
/* function $(selector) {
        //传入选择器得到对应节点
    return document.querySelector(selector)
}

//如何一个函数实现获取单节点和多个节点列表的功能?
// 方法一: 通过状态进行判断
function $(selector,isAll = false) {
   if (isAll){
    return document.querySelectorAll(selector)
   } else {

       return document.querySelector(selector )
   }
} */
// 方法二: 使用一个多功能的获取节点的方法

function $(selector) {
    let nodeList = document.querySelectorAll(selector);
    if (nodeList.length === 0){
        return console.warn(`${selector}没有获取到节点`);
    } 
    if (nodeList.length === 1){
        return nodeList[0];
    } 
    if (nodeList.length >1){
        return nodeList;
    } 
}


// 1.实现基本功能
// 2.确定函数名--tab()
// 3.确定函数参数--tabSelector,tabClassName,contSelector,contClassName
// 4.确定函数返回值--不需要
// 5.将功能代码放入函数壳子，替换对应变量
function tab(tabSelector, tabClassName, contSelector, contClassName) {
	// 1.获取相关节点
	// $('#tabList li')
	// 2.给每个li绑定点击事件
	$(tabSelector).forEach(function (v, i) {
		v.addEventListener("click", function () {
			// 3.先排他，移除所有的激活样式
			$(tabSelector).forEach(function (item, index) {
				item.classList.remove(tabClassName);
				// 通过对应的索引让卡片内容消失
				if (contSelector) {
					$(contSelector)[index].classList.remove(contClassName);
				}
			});
			// 4.再给自己增加激活样式
			this.classList.add(tabClassName);
			// 功能五：点击tab显示对应的内容
			// 1.获取相关节点
			// $("#contLt div");
			// 2.让所有的卡片内容消失
			// 3.点击li通过对应的索引显示对应的卡片内容
			if (contSelector) {
				$(contSelector)[i].classList.add(contClassName);
			}
		});
	});
}
// 6.调用测试
// 7.优化代码